<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<div th:fragment="paging" >
<form id="pagingForm">
<table  class="ui-pg-table paging">
    <tbody><tr>
        <td title="首页" onclick="paging.first()" style="cursor: default;" id="first_grid-pager" th:if="${page.pageNum gt 1}" class="ui-pg-button ui-corner-all">
            <span class="ui-icon icon-double-angle-left bigger-140" ></span>
        </td>
        <td title="上一页" onclick="paging.prePage()" style="cursor: default;" id="prev_grid-pager" th:if="${page.pageNum gt 1}" class="ui-pg-button ui-corner-all">
            <span class="ui-icon icon-angle-left bigger-140"></span>
        </td>
        <td class="ui-pg-button ui-state-disabled" style="width: 4px; cursor: default;">
            <span class="ui-separator"></span></td>
        <td dir="ltr">
              <span >当前页:</span>
              <input class="ui-pg-input" style="width:80px;" onchange="paging.changeNum()" id="pageNum" name="pageNum" th:value="${page.pageNum}" size="2" maxlength="7" value="0"  type="text"/>
              <span >总页数:</span><span th:text="${page.pages}"></span>
        </td>
        <td  class="ui-pg-button ui-state-disabled" style="width: 4px; cursor: default;">
            <span class="ui-separator"></span>
        </td>
        <td onclick="paging.nextPage()" title="下一页" style="cursor: default;" th:if="${page.pageNum lt page.pages}"  id="next_grid-pager" class="ui-pg-button ui-corner-all">
            <span class="ui-icon icon-angle-right bigger-140"></span>
        </td>
        <td onclick="paging.end()" title="末页" style="cursor: default;" th:if="${page.pageNum lt page.pages}" id="last_grid-pager" class="ui-pg-button ui-corner-all">
            <span class="ui-icon icon-double-angle-right bigger-140"></span>
        </td>
        <td dir="ltr" title="页大小" >
            <select  style="width:80px;"    onchange="paging.changeSize()" name="pageSize" class="ui-pg-selbox"  role="listbox">
                <option role="option" th:selected="${page.pageSize == 10}" value="10">10</option>
                <option role="option" th:selected="${page.pageSize == 20}" value="20">20</option>
                <option role="option" th:selected="${page.pageSize == 40}" value="40">40</option>
                <option role="option" th:selected="${page.pageSize == 100}" value="100">100</option>
                <option role="option" th:selected="${page.pageSize == 200}" value="200">200</option>
            </select>
        </td>
    </tr>
    </tbody>
    <script type="text/javascript" th:inline="javascript">
    var pageNum = /*[[${page.pageNum}]]*/;
    var pages = /*[[${page.pages}]]*/;


    var paging = new function(){

    this.first = function(){
        paging.gotoPage(1);
    };
    this.end = function(){
        paging.gotoPage(pages);
    };
	this.prePage = function(){
	    /*<![CDATA[*/
		var val = pageNum;
		if(val <= 1){
			val = 1;
		}else{
			val = val -1;
		}
		paging.gotoPage(val);
		/*]]>*/
	};
	this.nextPage = function(){
	    /*<![CDATA[*/
		var val = pageNum;
		var pageCount = pages;
		if(val >= pageCount){
			val = pageCount;
		}else{
			val = val + 1;
		}
		paging.gotoPage(val);
		/*]]>*/
	};
	this.isNotNumberic = function (val) {
        val = $.trim(val);
        var reg = RegExp("^[0-9]+$");
        return !reg.test(val);
    };
	this.changeNum = function(){
	    var index = document.getElementById("pageNum").value;
		paging.gotoPage(index);

	};
	this.changeSize = function(){

	    document.getElementById("pageNum").value = 1;
		doQuery();

	};
	this.gotoPage = function(index){
	    /*<![CDATA[*/
        if(paging.isNotNumberic(index)){
            alert("页码只能是数字！");
            return false;
        }
        if(index <= 1){
            index = 1;
        }
        if(index >= pages){
            index = pages;
        }
        if(pageNum == index){
            return ;
        }
		var iIndex = parseInt(index);
		var pageCount = pages;
		var $val = document.getElementById("pageNum");

		if(isNaN(index) || iIndex < 1){
			$val.value =1;
		}else if(iIndex > pageCount){
			$val.value = pageCount;
		}else {
			$val.value = iIndex;
		}
        doQuery();
        /*]]>*/
	};
}
</script>
</table>
</form>
</div>
</body>
</html>

